<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3动态背景登录框代码</title>

    <link rel="stylesheet" type="text/css" href="/fanZone/css/styles.css">
    <style type="text/css">
        body,td,th { font-family: "Source Sans Pro", sans-serif; }
        body { background-color: #2B2B2B; }
    </style>
</head>
<body>


<div class="wrapper">

    <div class="container">
        <h1>Welcome</h1>
        <form class="form">
            <input type="text" placeholder="Username" id="userName">
            <span class="spa spa1"></span>
            <input type="password" placeholder="Password" id="password">
            <span class="spa spa2"></span>
            <button type="submit" id="login-button">Login</button>
        </form>
    </div>

    <ul class="bg-bubbles">
        <li>1111</li>
        <li>111</li>
        <li>111</li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>

<script type="text/javascript" src="/fanZone/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
    $('#login-button').click(function(event){
        event.preventDefault();
        $('form').fadeOut(500);
        $('.wrapper').addClass('form-success');
    });

window.onload=function () {

    $("input").blur(function(){
        $(".spa").css("color","#BD362F")
        if($(this).is("#username")){             //姓名判断
            var na=/^[\u4E00-\u9FA5]{2,10}$/
            if($("#username").val()!=""){
                if(!(na.test($("#username").val()))){
                    $(".spa1").text("请输入2-4个汉字");
                    $(this).css("border","1px solid #BD362F")
                    return false;
                }else if(na){
                    $(".spa1").text("");
                    return true;
                }
            }else{
                $(".spa1").text("");
            }
        }
    })
    /********************** 聚焦提示 ************************/
    $("input").focus(function(){
        if($(this).is("#username")){
            $(".spa1").text("2-4个汉字").css("color","#aaa")
            $(this).css("border","1px solid #aaa")
        }
    })
    /*********************** 提交验证 ***************************/
    $("#login-button").click(function(){
        var na=/^[\u4E00-\u9FA5]{2,4}$/;   //姓名正则
        if(na.test($("#username").val())){
            return true;
        }else{
            if($("#username").val()==""){
                $(".spa1").text('请你填写用户名')
            }
            return false;
        }
    })
}
</script>

</body>
</html>